<template>
  <view class="page-container">
    <GlobalTopBar ref="topBarRef" class="topbars" :isLeft="true" color="#fff">
      <template #title><text style="color: #fff">设置</text></template>
    </GlobalTopBar>
    <view class="page_content">
      <!-- 顶部信息 -->
      <view class="topinfo">
        <image
          class="hadeimg"
          :src="store.userInfo?.headimg || `${store.imgDomain}my_hade.png`"
          mode="scaleToFill"
        />
        <view class="textbox">
          <text class="t1">{{ store.userInfo?.nick_name }}</text>
          <view class="t2" v-if="store.userInfo?.level_id">{{
            store.userInfo?.level_title_text
          }}</view>
          <view class="t3" v-else @click="store.to('/pages/my/memberCenter')">
            您还没有开通会员
          </view>
        </view>
      </view>
      <!-- 跳转信息 -->
      <view class="ulbox">
        <view class="ul">
          <view
            class="li"
            :class="{ border_b: index < ulList.length - 1 }"
            v-for="(item, index) in ulList"
            :key="index + 1"
            @click="liFun(item)"
          >
            <view class="imgbox">
              <image
                :class="`img${index + 1}`"
                :src="item.url"
                mode="scaleToFill"
              />
            </view>
            <view class="cen_text">
              <text class="t1">{{ item.text }}</text>
              <text class="t2">{{ item.text2 }}</text>
            </view>
            <!-- 箭头 -->
            <view style="transform: translateY(4rpx)">
              <uni-icons color="#999" type="right" size="20"></uni-icons>
            </view>
          </view>
        </view>
      </view>
      <!-- 文字 -->
      <view class="btext">
        <image :src="`${store.imgDomain}my_text.png`" mode="scaleToFill" />
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { useCounterStore } from '@/store';
import { onLoad, onShow } from '@dcloudio/uni-app';
import request from '@/utils/request';

const store = useCounterStore();
const userInfo = ref();
//
const ulList = [
  {
    url: `${store.imgDomain}settings_1.png`,
    text: '个人资料',
    text2: '',
    path: '/pages/my/myData',
  },
  {
    url: `${store.imgDomain}settings_2.png`,
    text: '我的地址',
    text2: '新增/修改地址',
    path: '/pages/my/myaddress',
  },
  {
    url: `${store.imgDomain}settings_3.png`,
    text: '用户协议',
    text2: '',
    path: '/pages/public/agreement?url=wxapp/login/getUserAgreement',
  },
  {
    url: `${store.imgDomain}settings_4.png`,
    text: '隐私协议',
    text2: '',
    path: '/pages/public/agreement?url=wxapp/login/getPrivacyPolicy',
  },
  {
    url: `${store.imgDomain}settings_5.png`,
    text: '投诉电话',
    text2: '',
    path: '',
    type: 'phone',
  },
  {
    url: `${store.imgDomain}settings_6.png`,
    text: '退出登录',
    text2: '',
    path: '',
    type: 'logout',
  },
];

const liFun = (item) => {
  if (item.type) {
    if (item.type === 'logout') {
      logoutFun();
    } else if (item.type === 'phone') {
      handleCall();
    }
  } else {
    if (item.path)
      uni.navigateTo({
        url: item.path,
      });
  }
};
store.getParamValByKey('complaint_hotline').then((res) => {
  store.complaint_hotlinePhone = res;
});
// 投诉电话
const handleCall = () => {
  uni.makePhoneCall({
    phoneNumber: store.complaint_hotlinePhone, // 要拨打的电话号码（字符串类型）
    success: () => {
      console.log('拨打电话请求已发出');
    },
  });
};

// 退出登录
const logoutFun = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    confirmText: '确定', // 确认按钮文字
    cancelText: '取消', // 取消按钮文字
    success: (res) => {
      if (res.confirm) {
        outLogin();
      }
    },
    fail: (err) => {
      console.error('显示模态框失败', err);
    },
  });
};
// 退出登录
const outLogin = async () => {
  await request('wxapp/login/outLogin');
  store.outFun();
};

onShow(() => {
  userInfo.value = store.userInfo;
});
</script>

<style lang="scss" scoped>
.topbars {
  background-color: #3b9dff;
}
.topinfo {
  box-sizing: border-box;
  padding: 30rpx;
  background-color: #3b9dff;
  display: flex;
  align-items: center;
  .hadeimg {
    border: 1px solid #fff;
    border-radius: 50%;
    width: 71rpx;
    height: 71rpx;
    margin-right: 20rpx;
  }
  .textbox {
    display: flex;
    flex-direction: column;
    .t1 {
      font-size: 30rpx;
      color: #fff;
    }
    .t2 {
      margin-top: 10rpx;
      width: max-content;
      font-size: 20rpx;
      color: #fff;
      padding: 5rpx 10rpx;
      border-radius: 10rpx;
      background-color: #1b71f2;
    }
    .t3 {
      margin-top: 10rpx;
      color: #ffdfaf;
      text-decoration: underline;
    }
  }
}
.ulbox {
  padding: 20rpx;
  .ul {
    border: 1rpx solid #437ef6;
    border-radius: 20rpx;
    box-sizing: border-box;
    padding: 0 20rpx;
    background-color: #fff;
    .li {
      display: flex;
      align-items: center;
      padding: 30rpx 20rpx;
      box-sizing: border-box;

      &.ac {
        border: none;
      }
      .imgbox {
        width: 50rpx;
        height: 45rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        .img1 {
          width: 46rpx;
          height: 34rpx;
        }
        .img2 {
          width: 36rpx;
          height: 38rpx;
        }
        .img3 {
          width: 40rpx;
          height: 40rpx;
        }
        .img4 {
          width: 38rpx;
          height: 44rpx;
        }
        .img5 {
          width: 40rpx;
          height: 40rpx;
        }
        .img6 {
          width: 42rpx;
          height: 44rpx;
        }
      }
      .cen_text {
        padding: 0 10rpx;
        flex: 1;
        display: flex;
        justify-content: space-between;

        .t2 {
          color: $uni-text-color-grey;
        }
      }
    }
  }
}
.btext {
  position: relative;
  margin-top: 35rpx;
  display: flex;
  justify-content: center;
  &::after {
    content: ' ';
    width: 100rpx;
    height: 1rpx;
    position: absolute;
    top: 50%;
    left: 140rpx;
    transform: translateY(-50%);
    background-color: #73adff;
  }
  &::before {
    content: ' ';
    width: 100rpx;
    height: 1rpx;
    position: absolute;
    top: 50%;
    right: 140rpx;
    transform: translateY(-50%);
    background-color: #73adff;
  }
  image {
    position: relative;
    display: block;
    opacity: 0.6;
    width: 185rpx;
    height: 38rpx;
  }
}
</style>
